.card-container {
  width: 100%;
  height: 170px;
  padding: 20px 0;
  perspective: 1000px;

  &.preload * {
    transition: none !important;
  }

  .creditcard {
    width: 100%;
    max-width: 260px;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    margin: 0 auto;
    cursor: pointer;

    &.flipped {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }

    .front,
    .back {
      position: absolute;
      width: 100%;
      max-width: 260px;
      backface-visibility: hidden;
      -webkit-font-smoothing: antialiased;
      color: #47525d;
    }

    .back {
      transform: rotateY(180deg);
    }

    svg#cardfront,
    svg#cardback {
      width: 100%;
      box-shadow: var(--light-box-shadow);
      border-radius: 18px;
    }

    #cardfront {
      .st2 {
        fill: var(--white);
      }

      .st3 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 600;
      }

      .st4 {
        font-size: 54.7817px;
      }

      .st5 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 400;
      }

      .st6 {
        font-size: 33.1112px;
      }

      .st7 {
        opacity: 0.6;
        fill: var(--white);
      }

      .st8 {
        font-size: 24px;
      }

      .st9 {
        font-size: 36.5498px;
      }

      .st10 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 300;
      }

      .st11 {
        font-size: 16.1716px;
      }

      .st12 {
        fill: #4c4c4c;
      }
    }

    #cardback {
      .st0 {
        fill: none;
        color: #0f0f0f;
        stroke-miterlimit: 10;
      }

      .st2 {
        fill: #111;
      }

      .st3 {
        fill: #f2f2f2;
      }

      .st4 {
        fill: #d8d2db;
      }

      .st5 {
        fill: #c4c4c4;
      }

      .st6 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 400;
      }

      .st7 {
        font-size: 27px;
      }

      .st8 {
        opacity: 0.6;
      }

      .st9 {
        fill: var(--white);
      }

      .st10 {
        font-size: 24px;
      }

      .st11 {
        fill: #eaeaea;
      }

      .st12 {
        font-family: 'Rock Salt', cursive;
      }

      .st13 {
        font-size: 37.769px;
      }
    }

    #svgname {
      text-transform: uppercase;
    }

    #ccsingle {
      position: absolute;
      right: 15px;
      top: 20px;

      svg {
        width: 100px;
        max-height: 60px;
      }
    }

    .lightcolor,
    .darkcolor {
      transition: fill 0.5s;
    }

    .lightblue {
      fill: #03a9f4;
    }

    .lightbluedark {
      fill: #0288d1;
    }

    .red {
      fill: #ef5350;
    }

    .reddark {
      fill: #d32f2f;
    }

    .purple {
      fill: #ab47bc;
    }

    .purpledark {
      fill: #7b1fa2;
    }

    .cyan {
      fill: #26c6da;
    }

    .cyandark {
      fill: #0097a7;
    }

    .green {
      fill: #66bb6a;
    }

    .greendark {
      fill: #388e3c;
    }

    .lime {
      fill: #d4e157;
    }

    .limedark {
      fill: #afb42b;
    }

    .yellow {
      fill: #ffeb3b;
    }

    .yellowdark {
      fill: #f9a825;
    }

    .orange {
      fill: #ff9800;
    }

    .orangedark {
      fill: #ef6c00;
    }

    .grey {
      fill: #bdbdbd;
    }

    .greydark {
      fill: #616161;
    }
  }
}
